<template>
    <view class="shareHaobao">
        <uni-popup ref="popup" type="center" :animation="false">
            <view v-if="!imageUrl" class="shareHaobaoHeader">
                <view class="shareHaobaoHeaderText">
                    <view class="title"> 长按保存分享码 </view>
                    <view class="imgs">
                        <image :src="image" mode="aspectFill"></image>
                    </view>
                    <view class="imgicon"> 转发分享码，好友扫码申请与您绑定 </view>
                </view>
            </view>
            <image v-if="imageUrl" :src="imageUrl" style="height: 800rpx;width: 622rpx;border-radius: 20rpx;"
                mode="aspectFill"></image>
        </uni-popup>
    </view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import html2canvas from 'html2canvas';
import { onLoad } from '@dcloudio/uni-app';
import API_CENTER from '@/api/teamcenter';
import { useUserStore } from '@/store/modules/user';
const props = defineProps({
    img: {
        type: String,
        default: ''
    }
})
const userStore = useUserStore();
const datainfo = userStore.userInfo;
const imageUrl = ref('')
const image = ref('')
const generatorImage = async () => {
    const posterElement = document.querySelector('.shareHaobaoHeader');
    if (!posterElement) return;
    const canvas = await html2canvas(posterElement as HTMLElement);
    imageUrl.value = canvas.toDataURL('image/png');
    uni.hideLoading()
}

const getShare = () => {
    uni.showLoading({
        title: '生成中...',
        mask: true
    })
    API_CENTER.getQrcode({ path: '/pages/user/my?inviter_code=' + datainfo?.inviter_code }).then(res => {
        image.value = res.base64;
        setTimeout(() => {
            generatorImage()
        }, 1000)
    }).finally(() => {
        uni.hideLoading()
    })
}

const popup = ref<any>(null)
const open = () => {
    popup.value?.open()
    getShare()
}



defineExpose({
    open
})
</script>
<style scoped lang="scss">
.shareHaobao {
    .shareHaobaoHeader {
        background: url('@/static/teamcenter/shareBg.png') no-repeat;
        height: 800rpx;
        width: 622rpx;
        background-size: 100% 100%;

        .shareHaobaoHeaderText {
            display: flex;
            flex-direction: column;
            align-items: center;
            border-radius: 20rpx;
            padding: 250rpx 20rpx 0;

            .title {
                font-size: 32rpx;
                color: #333;
                font-weight: bold;
            }

            .imgs {
                margin: 30rpx 0;

                image {
                    width: 300rpx;
                    height: 300rpx;
                }
            }

            .imgicon {
                font-size: 24rpx;
                color: #959EB0;
            }
        }
    }
}
</style>
